<template>
  <div class="screens-container">
    <div class="base-screen">
      <AboutScreen />
    </div>
    <div class="base-screen">
      <ShipScreen />
    </div>
    <div class="base-screen">
      <ServiceScreen />
    </div>
    <div class="base-screen">
      <FeatureScreen />
    </div>
    <div class="base-screen">
      <PlanScreen />
    </div>
    <div class="base-screen">
      <RequestScreen />
    </div>
    <div class="base-screen">
      <TeamScreen />
    </div>
    <div class="base-screen">
      <ClientScreen />
    </div>
    <div class="base-screen"></div>
  </div>
</template>

<script setup>
import AboutScreen from './AboutScreen.vue'
import ShipScreen from './ShipScreen.vue'
import ServiceScreen from './ServiceScreen.vue'
import FeatureScreen from './FeatureScreen.vue'
import PlanScreen from './PlanScreen.vue'
import RequestScreen from './RequestScreen.vue'
import TeamScreen from './TeamScreen.vue'
import ClientScreen from './ClientScreen.vue'

</script>
<style scoped>
.screens-container {
  width: 1400px;
  margin: 0 auto;
}
.base-screen {
  padding-top: 144px;
}
</style>
